<template>
	<view class="content">

		<view class="center_box">

			<view class="center_input_box">
				<u-search placeholder="日照香炉生紫烟" shape="round" height="80rpx" v-model="keyword"></u-search>
			</view>
			<u-popup :show="show" mode="center" :round="10" @close="close" @open="open">
				<view class="notice_head_class">
					任意点击通知窗口外位置关闭
				</view>
				<view class="notice_class">
					通知：出淤泥而不染，濯清涟而不妖，出淤泥而不染，濯清涟而不妖，出淤泥而不染，濯清涟而不妖，出淤泥而不染，濯清涟而不妖出淤泥而不染，濯清涟而不妖，出淤泥而不染，濯清涟而不妖，出淤泥而不染，濯清涟而不妖，出淤泥而不染，濯清涟而不妖
					......
				</view>
			</u-popup>

			<view class="center_button_box">
				<u-button @click="search()" type="primary" text="在线搜索"></u-button>
				<u-button @click="online_help()" type="success" text="使用帮助"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: '',
				show: false,
				error_show: false,
				content: ``,
				keyword: '拾光迟暮',
				error_message: ''
			};
		},
		onLoad() {
			// uni.$on('search_error', (data) => {
			// 	console.log('监听到事件来自search_error,携带参数 message 为：' + data.message);
			// 	uni.showToast({
			// 		title: '标题',
			// 		duration: 2000
			// 	});
			// })

			// 判断有无userinfo的信息，校验token的有效期，有效就跳转

			// 使用弹出层提示公告

			// 加载公告

			// 展示公告
			this.show = true

			// 判断有无userinfo的信息，校验token的有效期，有效就跳转
			try {
				const userinfo = uni.getStorageSync('userinfo');
				this.user = JSON.parse(userinfo)
			} catch (e) {
				//TODO handle the exception
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
			console.log(this.user)

		},
		methods: {
			// 文章搜索
			search() {
				// 1判断有登录

				// 2登录后就可以搜索
				uni.navigateTo({
					url: '/pages/books/books?keyword=' + this.keyword
				});

			},

			// 在线帮助
			online_help() {
				uni.showToast({
					title: '待开发',
					icon: 'none'
				});
			},

			open() {
				// console.log('open');
			},

			close() {
				this.show = false
				// console.log('close');
			},



		}
	}
</script>

<style lang="scss">
	.notice_head_class {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px;
		height: auto;
		color: red
	}

	.notice_class {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px;
		height: auto;
	}

	.center_input_box {
		width: 100%;
	}

	.center_button_box {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}

	.center_box {
		/* 设置透明度为50% */
		opacity: 0.88;
		height: 20%;
		width: 80%;
		padding: 20px;
		border-radius: 15px;
		background-color: white;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
	}

	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		height: 95vh;
		background-image: url(../../../static/background2.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}
</style>